<template>
  <div class="black-person">
    <div class="app-container" style="background-color: #fff ;margin-bottom: 25px;">
      <el-form :model="blackPerson" ref="blackPerson" :inline="true" >
        <el-form-item prop="record_sfzhm">
          <el-input v-model="blackPerson.record_sfzhm" clearable placeholder="身份证号"></el-input>
        </el-form-item>
        <el-form-item prop="record_name">
          <el-input v-model="blackPerson.record_name" clearable placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item prop="record_dwname">
          <el-input v-model="blackPerson.record_dwname" @click.native="handleSelectDwName" readonly placeholder="所属单位"></el-input>
        </el-form-item>
        <el-form-item>
        <el-button class="filter-item" style="margin-left: 10px;" @click="handleQuery(blackPerson)" type="primary"
                   icon="el-icon-search">查询
        </el-button>
        <el-button class="filter-item" style="margin-left: 10px;" @click="handleReset('blackPerson')" type="danger"
                   icon="el-icon-refresh">重置
        </el-button>
          </el-form-item>
      </el-form>
    </div>
    <div class="app-container calendar-list-container" style="background-color: #fff">
      <div class="filter-container">
        <el-row>
          <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary"
                     icon="el-icon-plus">增加
          </el-button>
          <el-button class="filter-item" style="margin-left: 10px;" @click="handleUpdate" type="primary"
                     icon="el-icon-edit">编辑
          </el-button>
          <el-button class="filter-item" style="margin-left: 10px;" @click="handleWBRYCreate" type="primary"
                     icon="el-icon-plus">添加外部人员
          </el-button>
          <el-button class="filter-item" style="margin-left: 10px;" @click="handleDelete" type="primary"
                     icon="el-icon-delete">删除
          </el-button>
          <el-button class="filter-item" style="margin-left: 10px;":loading="downloadLoading" @click="handleDownload" type="primary"
                     icon="el-icon-download">导出EXCEL
          </el-button>

        </el-row>
      </div>
      <el-table  :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit
                highlight-current-row stripe
                style="width: 100%" ref="blackPersonTable"  @selection-change="handleSelectChange">
        <el-table-column fixed type="selection" width="50"></el-table-column>
        <el-table-column fixed align="center" label="身份证号码" width="200px"  sortable >
          <template slot-scope="scope">
            <span>{{scope.row.sfzh}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="姓名" width="110px">
          <template slot-scope="scope">
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="单位名称" width="200px">
          <template slot-scope="scope">
            <span>{{scope.row.dwmc}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="职务" width="200px">
          <template slot-scope="scope">
            <span>{{scope.row.zw}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="处理人" width="110px">
          <template slot-scope="scope">
            <span>{{scope.row.clr}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="处理单位" width="120px">
          <template slot-scope="scope">
            <span>{{scope.row.cldw}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="处理时间" width="200px">
          <template slot-scope="scope">
            <span>{{scope.row.time}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="备注" width="220px">
          <template slot-scope="scope">
            <span>{{scope.row.remark}}</span>
          </template>
        </el-table-column>

      </el-table>
      <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                       layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>

      <el-dialog :title="dialogStatus" :visible.sync="dialogFormVisible">
        <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="100px"
                 style='width: 400px; margin-left:50px;'>
          <el-form-item label="人员选择"  prop="sfzh">
            <el-input  @click.native="handleSelectPerson" clearable placeholder="点击选择"v-model="temp.sfzh"/>
          </el-form-item>
          <el-form-item label="单位" >
            <el-input v-model="temp.dwmc"   readonly></el-input>
          </el-form-item>
          <el-form-item label="备注" >
            <el-input v-model="temp.remark"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button v-if="dialogStatus=='新增'" type="primary" @click="createData">确定</el-button>
          <el-button v-else type="primary" @click="updateData">确定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="添加外部人员" :visible.sync="dialogAddwbryVisible">
        <el-form ref="wbryForm" :rules='rules' :model="temp" label-position="left" label-width="100px"
                 style='width: 400px; margin-left:60px;'>
          <el-form-item label="身份证号" prop="sfzh">
            <el-input v-model="temp.sfzh"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name" >
            <el-input v-model="temp.name"></el-input>
          </el-form-item>
          <el-form-item label="职务" prop="zw">
            <el-select v-model="temp.zw" style="width: 185px" placeholder="职务" >
              <el-option v-for="item in zwlist" :key="item.value" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所在单位" prop="szdw">
            <el-input v-model="temp.szdw"  @click.native="handleAddPersonSelectDwName" clearable  placeholder="点击选择"></el-input>
          </el-form-item>
          <el-form-item label="原上岗证号" prop="ysgzh">
            <el-input v-model="temp.ysgzh"></el-input>
          </el-form-item>
          <el-form-item label="辞退原因" prop="cdyy">
            <el-input v-model="temp.cdyy"></el-input>
          </el-form-item>
          <el-form-item label="辞退日期" prop="timestamp">
            <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="请选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入备注内容" v-model="temp.remark">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddwbryVisible = false">取消</el-button>
          <el-button  type="primary" @click="createPersonData">确定</el-button>
        </div>
      </el-dialog>
      <person-child-dialog-dw
        :dialogDwVisible.sync="dialogDwVisible"
        @dwName="creatDwname" @dwName2="creatDwname1"  :dwType="dwType">
      </person-child-dialog-dw>
      <person-select-dialog :dialogSelectPerVisible.sync="dialogPersonVisible" @selectPer="dialogSelectPerson"></person-select-dialog>
    </div>
  </div>
</template>

<script>
  import ElDialog from 'element-ui/packages/dialog/src/component'
  import PersonChildDialogDw from './personChild/personChildDialogDw'
  import PersonSelectDialog from './organizationChild/personSelectDialog'
  import { creatBlackPerson } from '@/api/organization/blackList'
  /* eslint-disable */

  export default {
    components: {ElDialog,PersonChildDialogDw ,PersonSelectDialog},
    data() {
      return {
        blackPerson: {
          record_sfzhm: '', // 身份证号码
          record_name: '', // 姓名
          record_dwname: ''// 单位名称
        },
        dwType: 0,
        list: null,
        total: 100,
        listLoading: false,
        blackPersonTable: [],
        listQuery: {
          page: 1,
          sonPage: 1,//增加方法里的
          limit: 20,
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id'
        },
        temp: {
          sfzh: '',
          dwmc: '',
          name: '',
          timestamp: new Date(),
          zw: '',
          cdyy: '',
          ysgzh: '',
          szdw: '',
          remark: '',
          cldw: ''
        },
        zwlist: [
          { value: '1', label: '收费员' },
          { value: '2', label: '管理员'},
          {value: '3', label: '财务员'},
          {value: '4', label: '业务员'},
          {value: '5', label: '规划员'},
          {value: '6', label: '行政管理员'},
          {value: '7', label: '数据操作员'},
          {value: '8', label: '领导'}
        ],
        dialogFormVisible: false,
        dialogAddwbryVisible: false,
        dialogPersonVisible: false,
        dialogStatus: '',
        downloadLoading: false,
        dialogDwVisible: false,
        dialogPerson: {
          name: ''
        },

        dialogPvVisible: false,
        rules: {
          person: [{required: true, message: '请选择要添加的人员', trigger: 'change'}],
          sfzh: [{required: true, message: '输入身份证号', trigger: 'change'},
            {pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '输入正确格式的身份号',trigger: 'blur'}],
          szdw: [{required: true, message: '请选择单位',trigger: 'change'}],
          name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
          cdyy: [{required: true, message: '请输入辞职原因', trigger: 'blur'}],
          zw: [{required: true, message: '请选择职务', trigger: 'change'}],
          ysgzh: [{required: true, message: '请输入上岗证号', trigger: 'blur'}],
          timestamp: [{type:'date', required: true, message: '请选择日期', trigger: 'change'}]
        },
        downloadLoading: false
      }
    },
    created() {
      this.getList()
    },

    methods: {
      getList() {
        this.listLoading = true
        this.total = 100
        // fetchList(this.listQuery).then(response => {
        this.list = [{
          sfzh: '11111',
          dwmc: '',
          name: '',
          timestamp: new Date(),
          zw: '',
          clr: '',
          remark: '',
          cldw: ''
        }, {
          sfzh: '11112',
          dwmc: '',
          name: '',
          timestamp: new Date(),
          zw: '',
          clr: '',
          remark: '',
          cldw: ''
        }, {
          sfzh: '11113',
          dwmc: '',
          name: '',
          timestamp: new Date(),
          zw: '',
          clr: '',
          remark: '',
          cldw: ''
        }, {
          sfzh: '11114',
          dwmc: '',
          name: '',
          timestamp: new Date(),
          zw: '',
          clr: '',
          remark: '',
          cldw: ''
        }, {
          sfzh: '11115',
          dwmc: '',
          name: '',
          timestamp: new Date(),
          zw: '',
          clr: '',
          remark: '',
          cldw: ''
        }, {
          sfzh: '11116',
          dwmc: '',
          name: '',
          timestamp: new Date(),
          zw: '',
          clr: '',
          remark: '',
          cldw: ''
        }, {
          sfzh: '11117',
          dwmc: '',
          name: '',
          timestamp: new Date(),
          zw: '',
          clr: '',
          remark: '',
          cldw: ''
        }, {
          sfzh: '11118',
          dwmc: '',
          name: '',
          timestamp: new Date(),
          zw: '',
          clr: '',
          remark: '',
          cldw: ''
        }, {
          sfzh: '11119',
          dwmc: '',
          name: '',
          timestamp: new Date(),
          zw: '',
          clr: '',
          remark: '',
          cldw: ''
        }, {
          sfzh: '11110',
          dwmc: '',
          name: '',
          timestamp: new Date(),
          zw: '',
          clr: '',
          remark: '',
          cldw: ''
        }, {
          sfzh: '11122',
          dwmc: '',
          name: '',
          timestamp: new Date(),
          zw: '',
          clr: '',
          remark: '',
          cldw: ''
        }]
        this.total = 100
        this.listLoading = false
        // })
      },
      resetTemp() {
        this.temp = {
          sfzh: '',
          dwmc: '',
          name: '',
          timestamp: new Date(),
          zw: '',
          cdyy: '',
          ysgzh: '',
          szdw: '',
          remark: '',
          cldw: ''
        }
      },
      handleSelectChange: function(val) {
        this.blackPersonTable = val
      },
      handleSizeChange(val) {
        this.listQuery.limit = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      },
      handlePersonSelectCurrentChange(val) {
        this.listQuery.sonPage = val
      },
      handleCreate() {
        this.temp.sfzh=''
        this.temp.dwmc=''
        this.dialogStatus = '新增'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      handleWBRYCreate() {
        this.resetTemp()
        this.dialogAddwbryVisible = true
        this.$nextTick(() => {
          this.$refs['wbryForm'].clearValidate()
        })
      },
      handleSelectPerson(){
        this.dialogPersonVisible=true
      },

      dialogSelectPerson(val){
        this.dialogPersonVisible=false
        this.temp.sfzh=val
        this.temp.dwmc=val
      },
      createData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            // createArticle(this.temp).then(() => {
            this.list.unshift(this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
            // })
          }
        })
      },
      handleUpdate() {
        if(this.blackPersonTable.length==1){
          this.temp.sfzh= this.blackPersonTable[0].sfzh
          this.temp.dwmc= this.blackPersonTable[0].dwmc
          this.temp.remark= this.blackPersonTable[0].remark
          this.dialogStatus = '编辑'
          this.dialogFormVisible = true
          this.$nextTick(() => {
            this.$refs['dataForm'].clearValidate()
          })
        }


      },
      updateData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            // updateArticle(tempData).then(() => {
              for (const v of this.list) {
                if (v.sfzh === this.blackPersonTable[0].sfzh) {
                  const index = this.list.indexOf(v)
                  this.list.splice(index, 1, this.temp)
                  break
                }
              }
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            // })
          }
        })
      },
      handleDelete(){
        if(this.blackPersonTable.length>=1){
          for (const v of this.blackPersonTable) {
            let indexOf = this.list.indexOf(v);
              this.list.splice(indexOf,1)
          }
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        }
      },
      handleReset(blackPerson) {
        this.$refs[blackPerson].resetFields()
      },
      handleDownload(){
        this.downloadLoading=true
      },
      handleSelectDwName(){
        this.dwType=0
        this.dialogDwVisible=true
      },
      handleAddPersonSelectDwName(){
        this.dwType=1
        this.dialogDwVisible=true
      },
      creatDwname(val){
        this.blackPerson.record_dwname = val
      },
      creatDwname1(val){
        this.temp.szdw = val
        console.log(val+"......")
      },
      handleQuery(blackPerson){
        //查询
        this.listLoading=true
        creatBlackPerson(blackPerson.record_sfzhm,blackPerson.record_name,blackPerson.record_dwname).then(response => {
          this.listLoading=false
          console.log(response.data)
        })
      },
      createPersonData(){
        this.$refs['wbryForm'].validate((valid) => {
          if (valid) {
            // createArticle(this.temp).then(() => {
            this.dialogAddwbryVisible = false
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
            // })
          }
        })
      }
    }

  }
</script>

<style scoped>
  .black-person {
    padding: 32px;
    background-color: rgb(240, 242, 245);
  }

</style>

